<template>
  <div>
     <input type="file" ref="picRef" @change="uploadImage"><br>
     <div>
        <img :src="avatar" class="imgBox">
     </div>
     <div v-if="errMsg" style="color:red">
        {{errMsg}}
     </div>
  </div>
</template>

<script>
/**
 * 文件上传的步骤
 * 1、tempalte中编写页面结构<input type="file" ref="picRef">
 * 2、在文件组件中触发change事件,来调用methods中uploadImage方法
 */
import axios from 'axios'
export default {
  data(){
    return{
      errMsg:'',
      avatar:'https://img.puchedu.cn/uploads/0/253/118172136/732988675.jpg'
    }
  },
  methods:{
    async uploadImage(){
       //获取要上传的文件对象
      const file=this.$refs.picRef.files[0]
      //1、创建FormData对象
      const fd=new FormData()
      //2、设置formData的参数:fd.append(参数2，参数2) 参数1：为上传的时候的参数名，参数2:File对象
      fd.append("avatar",file)
      //3、通过axios.post请求来完成完成上传操作
      let url="http://www.zhaijizhe.cn:3005/upload/uploadImage"
      //如果上传的文件是FormData，必须要设置请求头中Content-Type设置为mutipart/form-data
      const result=await axios.post(url,fd,{
        headers:{
          'Content-Type':'mutipart/form-data'
        }
      })
      if(result.data.code==500){
        this.errMsg=result.data.message
      }else{
        this.avatar=`http://www.zhaijizhe.cn:3005${result.data.avatarPath}`
      }
      

    }
  }
}
</script>

<style>
  .imgBox{
    width: 100px;
    height: 100px;
    border: 1px solid #000;

  }
</style>